<template>
    <view class="container">
        <view style="text-align: center;">
            <image src="https://alicdn.joyballet.cn/eyemanager/wechat/logo.png" mode="widthFix" style="width: 60vw;"  />
        </view>
		<view v-if="studentList.length > 0">
			<!-- 学员表格 -->
			<view class="student-table">
				<view v-for="(student, index) in studentList" :key="student.id" :class="{ 'highlight': student.id === student_id }" class="table-row">
					<text class="table-cell">{{ student.name }}</text>
					<view class="table-cell">
						<button v-if="student.id === student_id" disabled class="select_btn" @click="switchStudent(student.id)">已选择</button>
						<button v-else class="select_btn" @click="switchStudent(student.id)">切换</button>
					</view>
				</view>
			</view>
			<!-- 使二维码居中 -->
			<image :src="qrcodeUrl" mode="aspectFit" v-if="qrcodeUrl" class="centered-qrcode" />
			<!-- <view>{{ qrtext }}</view> -->
		</view>
		<view v-else>
			<!-- 学员列表为空时显示按钮 -->
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="centered-button">获取预约码</button>
		</view>
        
    </view>
</template>

<script>
export default {
	data() {
		return {
			qrcodeUrl: '',
			studentList: [],
			student_id: '',
			qrtext: '',
		}
	},
	onShareAppMessage() {
      return {
        title: '双博视预约码', // 分享标题
        path: '/pages/user/signQrCode', // 分享路径
        imageUrl: 'https://alicdn.joyballet.cn/eyemanager/wechat/logo.png', // 分享图片，这里使用生成的二维码图片
		success: function(res) {
			// 转发成功
			console.log("转发成功:");
		},
		fail: function(res) {
			// 转发失败
			console.log("转发失败:");
		}
      }
    },
	onLoad() {
		this.wxlogin();
	},
	methods: {
		wxlogin() {
			const that = this;
			// 微信自动登录
			uni.login({
				success: (res) => {
					if (res.code) {
						// 向后台请求 openid
						this.$http.GET('/admin/student/student/getOpenid', { code: res.code }, function (res) {
							console.log('请求结果:', res.data);
							const openid = res.data.openid;
							uni.setStorageSync('openid', openid);
							that.loginByOpenidGetStudentList();
						}, function (res) {})
					} else {
						console.error('获取临时登录凭证失败');
					}
				},
				fail: (err) => {
					console.error('调用 uni.login 失败:', err);
				}
			});
		},
        getPhoneNumber(e) {
			const that = this;
            const openid = uni.getStorageSync('openid') || '';
            this.$http.POST('/admin/student/student/getPhoneNumber', { code: e.detail.code, openid: openid }, function (res) {
                console.log('成功获取手机号信息');
				that.wxlogin();
            })
        },
        loginByOpenidGetStudentList() {
            const that = this;
            const openid = uni.getStorageSync('openid') || '';
            this.$http.POST('/admin/student/student/loginByOpenidGetStudentList', { openid: openid }, function (res) {
                that.studentList = Object.values(res.data);
                if (that.studentList.length > 0) {
                    that.student_id = that.studentList[0].id;
                    that.generateQrcode();
                }
            })
        },
        generateQrcode() {
            const that = this;
            this.$http.GET('/admin/student/student/getPersonalQrCode', { studentId: that.student_id }, function (res) {
				console.log('生成二维码成功', res);
                that.qrcodeUrl = res.data.qrCodeDataUrl;
				that.qrtext = res.data.text;
            })
        },
        // 添加切换学员方法
        switchStudent(id) {
            this.student_id = id;
            this.generateQrcode();
        }
    }
}
</script>

<style scoped>
.select_btn {	
    background-color: #4CAF50;
    border: none;
    color: white;
}
.select_btn:disabled {
    background-color: #ccc;
    color: #666;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.student-table {
    width: 100%;
    border-collapse: collapse;
}
.table-header,
.table-row {
	font-size: 24px;
    display: flex;
	border-radius: 15px;
}
.table-cell {
    flex: 1;
    padding: 10px;
    text-align: center;
}
.table-header .table-cell {
    font-weight: bold;
}
.highlight {
    background-color: #4CAF50;
	color: #fff;
}
.centered-qrcode {
    margin-top: 20px;
}
.centered-button {
    margin-top: 40vw;
	background-color: #4CAF50;
    border: none;
    color: white;
	font-size: 36px;
}
</style>